<template>
	<view>
		<view class="box">
			<image class="guo" v-show="dui" src="https://sz.vvv5g.com/assets/img/wxImg/guo.png"></image>
			<image class="guo" v-show="!dui" src="https://sz.vvv5g.com/assets/img/wxImg/answer/wei.png"></image>
			<view class="guo_box" v-show="dui">
				<view class="title">恭喜您答题通关</view>

				<view class="xin_box">
					<view class="xin_btn" v-for="(item, index) in 4" :class="{ you: user_list[index] }"></view>
				</view>
				<view class="titlk">
					好友助力
					<view class="yq">（邀请4位点亮红心）</view>
				</view>
				<view class="bkmn">
					<view class="yq_box">
						<view class="yq_btn" v-for="(item, index) in 4">
							<image v-if="user_list[index]" class="toux" :src="user_list[index].avatar"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="wei_box" v-show="!dui">
				<view class="wtitle">一次的失败并不可怕，再来一局试试吧！</view>
				<view class="yanh">
					<view class="tishu">
						<view class="wh"></view>
						共{{ correctNum + errNum }}题
						<view class="wh"></view>
					</view>
					<view class="zy_box">
						<view class="zl">
							<image class="iml" src="../../static/answer/dadui.png"></image>
							<view class="tis">答对题数</view>
							<view class="numd">{{ correctNum }}</view>
						</view>
						<view class="su"></view>
						<view class="zl">
							<image class="iml" src="../../static/answer/dacuo.png"></image>
							<view class="tis">答错题数</view>
							<view class="numd">{{ errNum }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<button open-type="share" :plain="true" style="background-color: transparent; border: none; padding: 0; padding-bottom: 10rpx">
			<view class="guo_btn" v-show="dui">邀请好友助力</view>
		</button>
		<view class="fanhui" v-show="dui" @click="gopage">返回个人中心</view>

		<view class="congx" v-show="!dui" @click="again">重新答题</view>
	</view>
</template>

<script>
export default {
	props: {
		dui: {
			default: true,
			type: Boolean
		},
		errNum: {
			default: 0,
			type: Number
		},
		correctNum: {
			default: 0,
			type: Number
		},
		user_list: {
			default: 0,
			type: Array
		}
	},
	data() {
		return {};
	},
	components: {},
	computed: {},
	onLoad() {},
	methods: {
		// 再次答题
		again() {
			this.$emit('again');
		},
		// 返回个人中心
		gopage() {
			uni.switchTab({
				url: '/pages/personal/personal'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	width: 686upx;
	margin: 0 auto;
	padding-bottom: 52upx;
	background: #f9fafa;
	border-radius: 28upx;
	border: 4upx solid #feffe8;
	position: relative;
	.guo {
		position: absolute;
		width: 518upx;
		height: 354upx;
		left: 50%;
		margin-left: -259upx;
		top: -290upx;
	}
}
.guo_box {
	.title {
		text-align: center;
		padding-top: 88upx;
		color: #f06b00;
		font-size: 32upx;
	}
	.xin_box {
		width: 460upx;
		margin: 0 auto;
		margin-top: 50upx;
		display: flex;
		justify-content: space-between;
		.xin_btn {
			width: 78upx;
			height: 78upx;
			background: url(../../static/answer/x.png) no-repeat center;
			background-size: 100%;
			&.you {
				background: url(../../static/answer/xm.png) no-repeat center;
				background-size: 100%;
			}
		}
	}
	.titlk {
		text-align: center;
		color: #333333;
		font-size: 32upx;
		margin-top: 40upx;
		.yq {
			color: #666666;
			font-size: 24upx;
			display: inline-block;
		}
	}
	.bkmn {
		width: 622upx;
		height: 126upx;
		background: #f3f5f6;
		border-radius: 16upx;
		margin: 0 auto;
		margin-top: 42upx;
	}
	.yq_box {
		width: 494upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.yq_btn {
			width: 78upx;
			height: 78upx;
			margin-top: 24upx;
			background: url(../../static/answer/yao.png) no-repeat center;
			background-size: 100%;
			.toux {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
}
.guo_btn {
	width: 622upx;
	height: 80upx;
	background: linear-gradient(154deg, #f08a38 0%, #f06b00 100%);
	border-radius: 40upx;
	margin: 0 auto;
	margin-top: 60upx;
	box-shadow: 0 10upx 8upx #d87416;
	color: #fff;
	font-size: 28upx;
	text-align: center;
	line-height: 80upx;
}
.congx {
	width: 622upx;
	height: 80upx;
	background: linear-gradient(154deg, #7ed782 0%, #42bd47 100%);
	border-radius: 40upx;
	margin: 0 auto;
	margin-top: 60upx;
	box-shadow: 0 10upx 8upx #329d36;
	color: #fff;
	font-size: 28upx;
	text-align: center;
	line-height: 80upx;
}
.fanhui {
	width: 622upx;
	height: 80upx;
	border-radius: 40upx;
	border: 1upx solid rgba(132, 73, 2, 0.6);
	margin: 0 auto;
	margin-top: 50upx;
	text-align: center;
	line-height: 80upx;
	color: #844902;
	font-size: 28upx;
}

.wei_box {
	.wtitle {
		text-align: center;
		color: #844902;
		padding-top: 88upx;
		font-size: 28upx;
	}
	.yanh {
		width: 622upx;
		height: 228upx;
		background: #f3f5f6;
		border-radius: 16upx;
		margin: 0 auto;
		margin-top: 54upx;
	}
	.tishu {
		text-align: center;
		color: #333333;
		font-size: 28upx;
		padding-top: 40upx;
		.wh {
			display: inline-block;
			width: 28upx;
			height: 28upx;
			background: url(../../static/answer/wenhao.png) no-repeat center;
			background-size: 100%;
			vertical-align: middle;
			margin: 0 6upx;
		}
	}
	.zy_box {
		display: flex;
		width: 540upx;
		margin: 0 auto;
		margin-top: 60upx;
		justify-content: space-between;
		.zl {
			display: flex;
			.iml {
				width: 46upx;
				height: 46upx;
			}
			.tis {
				color: #555555;
				font-size: 24upx;
				line-height: 46upx;
				margin-left: 12upx;
				margin-right: 24upx;
			}
			.numd {
				color: #333333;
				font-size: 32upx;
			}
		}
	}
}
</style>
